<template>
  <div class="user">
    <template>
      <el-table size="mini"
          :data="tableData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%;
           ">
        <el-table-column label="用户图片" width="110" align="center">
          <template slot-scope="scope">
            <div class="singer-img">
              <img :src="getUrl(scope.row.pic)" style="width:50px;height: 50px"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            label="用户名"
            prop="username"
            width="100">
        </el-table-column>
        <el-table-column label="性别" width="100">
          <template slot-scope="scope">
            {{getsex(scope.row.sex)}}
          </template>
        </el-table-column>
        <el-table-column
            label="金额"
            prop="balance"
            width="100">
        </el-table-column>
        <el-table-column
            label="创建时间"
            prop="created">
        </el-table-column>
        <el-table-column
            label="最后登录时间"
            prop="lastlogintime">
        </el-table-column>
        <el-table-column
            label="个性签名"
            prop="introduction">
        </el-table-column>
        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="根据用户名搜索"
            style="margin-top: 40px"/>
            <el-button type="primary" size="mini" round style="margin-top: 20px" @click="adduser">添加用户</el-button>
          </template>
          <template slot-scope="scope">

            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  <div class="register">
    <el-dialog :visible.sync="dialogFormVisible" width="40%" height="300px">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="用户密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item
              prop="email"
              label="邮箱"
              :rules="[
       { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
     ]"
          >
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">添加</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import {getalluser,getallusers,search,register,deleteuser} from "../api";
import {mixin} from "../mixins";
export default {
  inject:["reload"],
  mixins: [mixin],
  name: "UserMannage",
  data() {
    return {

      formLabelWidth: '120px',
      tableData: [],
      // alluser:[],
      total: 0,
      search: '',
      currentPage1: 1,
      dialogFormVisible: false,
      form:{
        username:'',
        password:'',
        email: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      deleteuser(row.id).then((res)=>{
        this.$message.success("删除成功")
        this.reload();
      })
    },
    getsex(sex){
      if(sex===1){
        return '男';
      }else{
        return '女';
      }
    },

    handleCurrentChange(val) {
      this.tableData = [];
      getalluser(val).then((res)=>{
        this.tableData = res.data.records;
      })

    },

    adduser(){
      this.dialogFormVisible = true
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          register(this.form).then((res)=>{
            this.dialogFormVisible = false
            this.$message.success("添加成功")
            this.reload();
          })
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    getalluser(this.currentPage1).then((res)=>{
      this.tableData = res.data.records;
      this.total = res.data.total
    })
    // getallusers().then((res)=>{
    //   this.alluser = res.data.userlist;
    // })
  },
  watch:{
    search : function (val,oldVal){
      // console.log('new: %s, old: %s', val, oldVal)
      search(this.currentPage1,val).then((res)=>{
        this.tableData = res.data.records;
        this.total = res.data.total;
        // console.log(res)
      })
    }
  }
}
</script>

<style scoped>
.user{
  height: 300px;
}
.register{
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
>>>.el-dialog {
  width: 35%;
}
.block{
  padding: 20px 0;
}
h2{
  padding: 0;
  margin: 0;
}
.el-input{
  /*width: 30px;*/
}
</style>
